import React from 'react';
import {
  View,
  Image,
  StyleSheet,
  Text
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';

const ShoppingBagCard = (props) => {
  const { item ,index } = props;
  return (
    <View style={styles.card}>
      <Image style={styles.left} source={item.img} />
      <View style={styles.right}>
        <Text style={styles.rightPrice}>￥{item.price}</Text>
        <Text style={styles.rightTitle}>{item.title}</Text>
        <View style={styles.rightNumBox}>
          <Text style={styles.rightNumText}>数量：{item.num} <AntDesign name="down" size={13} style={styles.downIcon}/></Text>
          <Text style={styles.rightNumSize}>尺寸：{item.size} <AntDesign name="down" size={13} style={styles.downIcon}/></Text>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  card: {
    width: 335,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    marginTop: 20,
  },
  left:{
    width: 100,
    height: 100,
    borderRadius: 4,
    marginRight: 16,
  },
  right:{
    flex:1,
  },
  rightPrice:{
    fontSize: 21,
    lineHeight: 31,
    height: 31
  },
  rightTitle:{
    fontSize: 14,
    height: 40,
    marginTop: 3,
    marginBottom: 6,
    width:'100%'
  },
  rightNumBox:{
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  rightNumText:{
    marginRight: 20,
  },
  rightNumSize:{

  },
  downIcon:{
    left: -5,
    bottom: -10
  }
})

export default ShoppingBagCard;